<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>参数校验</title>
		<script src="../libs/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id='root'>
			<mychildren :content='msg' :parms="'11111111111'" :parmsa='11' :click='testClick'></mychildren>
		</div>
	</body>
	<script>
		var children = Vue.component('v-children',{
			// 子组件用props接收, 参数校验
			props:{
				content:[Number,String],
				parms: {
					type:String,//传递的数据必须是字符串 
					required:true,//参数必须传递
					default: 'hello world!',//没传值的默认值
					validator:value=>{return value.length>10}//自定义验证方法，传入的数据必须大于10个字符
				},
				parmsa:{
					type: Number,  
					required: true,
					default:0,
					validator: value=>{console.log(typeof (value)); return value>10} //必须是数值
				},
				click :{
					typ: Function,
					required:true,
					validator:value=>{console.log(typeof(value)); return typeof(value) == 'function' } //必须是function
				}
			},
			data: function(){
				return {
					clickFunc:this.click, //复制父组件传过来的Function,调用依然有效
					age:this.parmsa,
					count:0
				}
			},
			template:'<div @click="reqPatherMethod">{{content}}</div>',
			methods:{
				reqPatherMethod:function(){
					//两个调用方式一样
					console.log(this.age);
					console.log(typeof(this.age));
					this.count++;
					this.click(this.age + this.count); 
					//this.clickFunc(1); //执行父组件传递过来的function
				}
			}
		});
		
		var vm = new Vue({
			el:'#root',
			data:{
				msg:'hello vue'
			},
			components:{
				mychildren:children
			},
			methods:{
				testClick:function(data){
					alert(this.msg+'-'+data);
				}
			}
		});
		
	</script>
</html>
